import React, { Component } from 'react';

/**
 * Form 受控组件
 */
export default class NameForm extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: ''
        }
    }

    handleChange(e) {
        this.setState({
            value: e.target.value
        })
    }

    handleSubmit(event) {
        alert('提交的名字: ' + this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={() => this.handleSubmit()}>
                <label>
                名字:
                <input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}
